<script>
	import G6 from '@antv/g6';
	import { onMount } from 'svelte';
	const data = {
		nodes: [
			{
				id: 'node_circle',
				x: 100,
				y: 100,
				type: 'circle',
				label: 'circle'
			},
			{
				id: 'node_rect',
				x: 200,
				y: 100,
				type: 'rect',
				label: 'rect'
			},
			{
				id: 'node-ellipse',
				x: 330,
				y: 100,
				type: 'ellipse',
				label: 'ellipse'
			},
			{
				id: 'node-diamond',
				x: 460,
				y: 100,
				type: 'diamond',
				label: 'diamond'
			},
			{
				id: 'node-triangle',
				x: 560,
				y: 100,
				//size: 80,
				type: 'triangle',
				label: 'triangle'
			},
			{
				id: 'node-star',
				x: 660,
				y: 100,
				//size: [60, 30],
				type: 'star',
				label: 'star'
			},
			{
				id: 'node-image',
				x: 760,
				y: 100,
				size: 50,
				type: 'image',
				img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
				label: 'image'
			},
			{
				id: 'node-modelRect',
				x: 900,
				y: 100,
				type: 'modelRect',
				label: 'modelRect'
			}
		]
	};
	onMount(() => {
		const graph = new G6.Graph({
			container: 'node',
			width: 1200,
			height: 300,
			defaultNode: {
				// 其他配置
				linkPoints: {
					// top: true,
					// bottom: true,
					left: true,
					right: true,
					size: 5,
					fill: '#fff'
				}
			}
		});
		graph.data(data);
		graph.render();
	});
</script>

<div id="node" />
